<template>
  <div class="container ml-3">
    <div class="flex items-center mb-4 gap-8">
      <div>诊断信息</div>
      <button class="btn" @click="exportLog">导出</button>
    </div>
    <div class="flex items-center mb-3 gap-8">
      <div>ssh配置</div>
      <el-switch v-model="sshConfig.enable" :active-value="1" :inactive-value="0"
                 active-color="#13ce66" inactive-color="#C0CCDA"
                  @change="postsshconfig">

      </el-switch>
    </div>

  </div>
</template>

<script>
import { Loading } from 'element-ui';

import {exportStatus, getsshConfig, postsshConfig} from "@/api/api2";

export default {
  name: 'index',
  data() {
    return {
      sshConfig: {
        enable: false
      }
    }
  },
  mounted() {
    getsshConfig().then(res => {
      if (res.code === 0) {
        this.sshConfig = res.data;
      }
    })
  },
  methods: {
    exportLog() {
      Loading.service({
        lock: true,
        text: '正在导出...',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      exportStatus().then(res => {
        if (res.code === 0) {
          const downloadUrl = `${location.origin}/download/${res.data.filename}`;
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.setAttribute('download', res.data.filename);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.$message({
            message: '导出成功',
            type: 'success'
          });
          Loading.service().close();
        } else {
          Loading.service().close();
          this.$message.error('导出失败');
        }
      })
    },

    postsshconfig() {
      postsshConfig(this.sshConfig).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        } else {
          this.$message.error('保存失败');
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  margin-bottom: 5%;
}

.btn {
  width: 120px;
  padding: 2px 17px;
  margin-right: 5px;
  line-height: normal;
  background-color: #F2F2F2;
  border: 1px solid #C5C5C5;
  font-style: normal;
  -moz-border-radius: 2px;
  font-size: 12px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.btn {
  display: inline-block;
  margin: 2px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  -webkit-appearance: button;
}
button:hover {
  background-color: #E6E6E6;
  border-color: #C5C5C5;
}
button:active {
  background-color: #D9D9D9;
  border-color: #B3B3B3;
}
button:focus {
  outline: none;
}
</style>
